﻿@model FamilyJobsUI.Models.UserPoints_Create_Model


    <link href="@Url.Content(@"~/Content/jquery.bootstrap-touchspin.css")" rel="stylesheet" type="text/css" media="all">




    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

    <div>
        <div class="form-horizontal">
            @*<h4>T_UserPoints</h4>*@
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.up_Points, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @*@Html.EditorFor(model => model.up_Points, new { htmlAttributes = new { @class = "form-control" } })*@
                    <div class="input-group input-group-lg" style="max-width: 200px">
                        <input id="up_Points" type="text" value="" name="up_Points" class="form-control input-lg">
                    </div>
                    @*<div class="input-group" style="max-width:200px">
                            <span class="input-group-addon btn btn-lg downButton">-</span>
                            <div>
                                <input id="up_Points" type="text" value="@(Model.up_Points)" name="up_Points" class="form-control input-lg">
                            </div>
                            <span class="input-group-addon btn btn-lg upButton">+</span>
                        </div>*@

                    @Html.ValidationMessageFor(model => model.up_Points, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.up_UserID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("up_UserID", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.up_UserID, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2">&nbsp</label>
                <div class="col-md-10">
                    @Model.user_Email
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.up_PointTypeID,  htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("up_PointTypeID", null, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.up_PointTypeID, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.up_Reason, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(a => a.up_Reason, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.up_Reason, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    @Html.Gravatar(@Model.user_Email, 200, new { Title = "My Gravatar", Alt = "Gravatar", @id = "gravatarImg" })
                </div>
            </div>



        </div>
    </div>
        
        <div>
            
        </div>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>



@section Scripts {

    <script>
        //$('#upButton').click(function () {
        //    $('#selector button').addClass('active').not(this).removeClass('active');
        //});
    </script>

    <script src="@Url.Content(@"~\Scripts\jquery.bootstrap-touchspin.js")"></script>
    <script>
        $("input[name='up_Points']").TouchSpin({
            min: -50,
            max: 50,
            step: 1,
            decimals: 0,
            boostat: 5,
            maxboostedstep: 10,
            initval: @(Model.up_Points) + 0,
            buttonup_class: "btn btn-default push-left"
            //,            postfix: '%'
        });


        $("#up_UserID").change(function () {
            askServerForStuff();
        });


        $("#up_PointTypeID").change(function () {
            askServerForStuff();
        });
        
        function askServerForStuff() {
            var up_UserID_Val = $('#up_UserID').val();
            var up_PointTypeID_Val = $('#up_PointTypeID').val();
            var serviceURL = '@Url.Action("Create_GetUserInfo", "UserPoints")';
            var data = { 
                user_ID: up_UserID_Val,
                up_PointTypeID: up_PointTypeID_Val
            };

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {
                $("#gravatarImg").attr("src",  data.url) ;

                $("input[name='up_Points']").val(data.defaultPointValue);
            }

            function errorFunc(request, status, error) {
                alert('error');
            }
        }
    </script>

}
